import React from "react"
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
  Image,
} from "react-native"
import LinearGradient from "react-native-linear-gradient"
import {useTHNavigation} from "../../utils/navigation"
import {useDispatch} from "react-redux"
import {clearToken} from "../../store/user/userSlice"
import {useShowConfirm} from "../../hooks"

const phone = "166****7654"

const settings = [
  {label: "设置陌生人问题", onPress: () => {}},
  {label: "通知设置", onPress: () => {}},
  {label: "黑名单", onPress: () => {}},
  {label: "修改手机号", value: phone, onPress: () => {}},
]

export default function SettingPage() {
  const navigaton = useTHNavigation()
  const dispatch = useDispatch()
  const showConfirm = useShowConfirm()
  const logout = () => {
    showConfirm({
      title: "提示",
      content: "确认要退出登录吗",
      onConfirm: async () => {
        await dispatch(clearToken())
        navigaton.reset({
          index: 0,
          routes: [{name: "Login"}],
        })
      },
    })
  }
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: "#F5F6FA"}}>
      {/* 顶部渐变导航栏 */}
      <LinearGradient
        colors={["#7B5FFF", "#01C8FF"]}
        start={{x: 0, y: 0}}
        end={{x: 1, y: 0}}
        style={styles.header}>
        <TouchableOpacity
          style={styles.backBtn}
          onPress={() => {
            navigaton.goBack()
          }}>
          <Image
            style={{width: 20, height: 20}}
            source={require("../../res/left.png")}
          />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>通用设置</Text>
      </LinearGradient>

      {/* 设置项列表 */}
      <View style={styles.list}>
        {settings.map((item, idx) => (
          <TouchableOpacity
            key={item.label}
            style={[
              styles.listItem,
              idx === settings.length - 1 ? {borderBottomWidth: 0} : {},
            ]}
            onPress={item.onPress}
            activeOpacity={0.7}>
            <Text style={styles.listLabel}>{item.label}</Text>

            <View style={{flexDirection: "row", alignItems: "center"}}>
              <Text style={styles.listValue}>{item.value}</Text>
              <Image
                style={{width: 20, height: 20}}
                source={require("../../res/right.png")}
              />
            </View>
          </TouchableOpacity>
        ))}
      </View>

      {/* 退出登录按钮 */}
      <View style={styles.logoutBox}>
        <TouchableOpacity style={styles.logoutBtn} onPress={logout}>
          <Text style={styles.logoutText}>退出登录</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  header: {
    height: 86,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "transparent",
    paddingTop: 30,
  },
  backBtn: {
    position: "absolute",
    left: 10,
    bottom: 10,
    padding: 6,
    zIndex: 2,
  },
  headerTitle: {
    flex: 1,
    textAlign: "center",
    color: "#fff",
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 2,
  },
  list: {
    backgroundColor: "#fff",
    borderRadius: 12,
    marginTop: 18,
    marginHorizontal: 0,
    overflow: "hidden",
  },
  listItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    height: 52,
    borderBottomWidth: 1,
    borderBottomColor: "#F0F0F0",
    backgroundColor: "#fff",
    justifyContent: "space-between",
  },
  listLabel: {
    fontSize: 16,
    color: "#333",
  },
  listValue: {
    fontSize: 15,
    color: "#888",
    marginRight: 6,
  },
  logoutBox: {
    marginTop: 40,
    alignItems: "center",
  },
  logoutBtn: {
    width: "80%",
    height: 48,
    backgroundColor: "#fff",
    borderRadius: 24,
    justifyContent: "center",
    alignItems: "center",
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.06,
    shadowRadius: 2,
  },
  logoutText: {
    color: "#333",
    fontSize: 17,
    fontWeight: "bold",
  },
})
